<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <!--css文件-->
    <link rel="stylesheet" href="css/style.css">
    <!--字体图标文件-->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <a class="navbar-brand" href="index.html"><img src="images/logo.jpg" alt="" width="45"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="class.html">分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="blog.html">博客</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">联系</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="me-sm-2" type="search" placeholder="搜索">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                </form>
            </div>
        </nav>

        <div class="row border bg-white m-0 px-3 pt-4 pb-5 blog-border">
            <div class="col-12 col-lg-8 pb-5">
                <h4><i class="fa fa-volume-control-phone mr-2"></i><span>你的联系方式</span></h4>
                <hr />
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control w-75" placeholder="姓名" data-bs-toggle="popover"
                            data-placement="right" data-bs-content="请输入你的姓名">
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control w-75" placeholder="邮箱" data-bs-toggle="popover"
                            data-placement="right" data-bs-content="请输入你的邮箱">
                    </div>
                    <div class="form-group">
                        <input type="tel" class="form-control w-75" placeholder="手机号" data-bs-toggle="popover"
                            data-placement="right" data-bs-content="请输入你的手机号">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control w-75" rows="5" placeholder="留言板" data-bs-toggle="popover"
                            data-placement="right" data-bs-content="留言板"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>
            </div>
            <div class="col-12 col-lg-4">
                <h4 class="shadow mb-4"><i class="fa fa-phone-square mx-2"></i><span>联系我们</span></h4>
                <div class="alert alert-primary" role="alert">
                    <i class="fa fa-qq me-3"></i>
                    <span>357975357</span>
                </div>
                <div class="alert alert-info" role="alert">
                    <i class="fa fa-weixin me-3"></i>
                    <span>codehome6</span>
                </div>
                <div class="alert alert-success" role="alert">
                    <i class="fa fa-mobile fa-2x me-3"></i>
                    <span>130XXXXXXXX</span>
                </div>
                <div class="alert alert-danger" role="alert">
                    <i class="fa fa-map-marker fa-2x mr-3"></i>
                    <span>北京千古摄影工作室</span>
                </div>
            </div>
        </div>
    </div>
</body>


</html>